<template>
    <div>
        <el-tag v-for="(item,index) in tags" :key="item.path" :closable="item.name!=='home'" 
            :effect="$route.name===item.name?'dark':'plain'"  @click="goMenu(item)" @close="closeTags(item,index)">
            {{ item.label }}
        </el-tag>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';
export default({
    name: 'CommonTag',
    data(){
        return{

        }
    },
    computed:{
        ...mapState({
            tags:state=>state.tagsList
        })
    },
    methods:{
        ...mapMutations(["closeTag"]),
        goMenu(item){
            this.$router.push({path:item.path});
        },
        closeTags(item,index){
            //点击要删除的item ，传给store
            this.closeTag(item)
            // tags的长度
            let length=this.tags.length;
            // 删除之后跳转的逻辑
            if(item.name!==this.$route.name){
                return;//如果不是删除的不是当前路由，则没事
            }
            //删除的是当前路由
            if(index===length){
                //当前路由刚好在最后一个，那么激活路由就要是 跳转到前一个路由
                this.$router.push({
                    name:this.tags[index-1].name
                })
            }else{
                //当前路由不在最后一个，那么激活路由就要是 跳转到后一个路由
                this.$router.push({
                    name:this.tags[index].name
                })
            }
        }
    }
})
</script>
<style scoped>
.el-tag{
    padding-left:10px ;
    margin-left: 10px;
    cursor: pointer;
}
</style>